import React from 'react'
import { Button, Form, Input, message } from 'antd';
import longinStyle from './Login.module.css'
// import './Login.module.css'
import axios from 'axios';
import './antdChange.css'

export default function Login(props) {
    // 点击登录完成
    const onFinish = (values) => {
        // `/users?username=${values.username}&password=${values.password}&roleState=true&_expand=role`
        axios.get(`/users?username=${values.username}&password=${values.password}&roleState=true&_expand=role`).then(res => {
            // console.log(res.data)
            if (res.data.length === 0) {
                message.error("账户密码不匹配")
            } else {
                localStorage.setItem("token", JSON.stringify(res.data[0]))
                props.history.push('/')
                // console.log(props,'props');
                message.success('登录成功')
            }
        })
        // console.log('Success:', values);
    };
    // 默认账户登录信息
    const initialValues = {
        username: 'admin',
        password: '123456',
    };
    return (
        <div>

            <div className={longinStyle.loginContainer}>

                <div className={longinStyle.formContainer} >

                    <div className={longinStyle.logintitle}>全球新闻发布后台管理系统</div>
                    <Form
                        onFinish={onFinish}
                        initialValues={initialValues}
                    >
                        <Form.Item
                            className="white18"
                            label="账户"
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your username!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            className="white18"
                            label="密码"
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your password!',
                                },
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item
                            wrapperCol={{
                                offset: 8,
                            }}
                        >
                            <Button size="large" onClick={() => {
                                props.history.push('/news')
                            }} style={{ backgroundColor: "#32bcb0", color: "#fff", border: "none", fontSize: "16px", fontWeight: "700" }} >
                                游客
                            </Button>
                            <Button size="large" style={{ backgroundColor: "#f5f5f5", fontSize: "16px", fontWeight: "700", marginLeft: "15px" }} htmlType="submit">
                                登录
                            </Button>
                            <Button size="large" style={{ backgroundColor: "#f5f5f5", fontSize: "16px", fontWeight: "700", marginLeft: "15px" }} htmlType="reset">
                                重置
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </div>
    )
}
